<template>
  <div class="profile-container">
    <n-grid :cols="24" :x-gap="24">
      <!-- 左侧导航 -->
      <n-grid-item :span="6">
        <n-card>
          <div class="profile-sidebar">
            <div class="user-info">
              <div class="avatar-wrapper" @click="showAvatarSelector = true">
                <n-avatar
                  :size="80"
                  round
                  :src="userAvatar"
                  fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <div class="avatar-overlay">
                  <n-icon><camera-outline /></n-icon>
                </div>
              </div>
              <h3>{{ username }}</h3>
              <p class="user-role">普通用户</p>
            </div>
            <n-menu
              :options="menuOptions"
              :value="activeKey"
              @update:value="handleMenuUpdate"
            />
          </div>
        </n-card>
      </n-grid-item>

      <!-- 右侧内容 -->
      <n-grid-item :span="18">
        <n-card>
          <!-- 基本信息 -->
          <div v-if="activeKey === 'basic'" class="profile-section">
            <h3>基本信息</h3>
            <n-form
              ref="formRef"
              :model="basicInfo"
              :rules="rules"
              label-placement="left"
              label-width="100"
              require-mark-placement="right-hanging"
            >
              <n-form-item label="用户名" path="username">
                <n-input v-model:value="basicInfo.username" disabled placeholder="请输入用户名" />
              </n-form-item>
              <n-form-item label="昵称" path="nickname">
                <n-input v-model:value="basicInfo.nickname" placeholder="请输入昵称" />
              </n-form-item>
              <n-form-item label="邮箱" path="email">
                <n-input v-model:value="basicInfo.email" placeholder="请输入邮箱" />
              </n-form-item>
              <n-form-item label="手机号" path="phone">
                <n-input v-model:value="basicInfo.phone" placeholder="请输入手机号" />
              </n-form-item>
              <n-form-item label="个人简介" path="bio">
                <n-input
                  v-model:value="basicInfo.bio"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入个人简介"
                />
              </n-form-item>
              <n-form-item>
                <n-button type="primary" @click="handleSaveBasic">
                  保存修改
                </n-button>
              </n-form-item>
            </n-form>
          </div>

          <!-- 安全设置 -->
          <div v-if="activeKey === 'security'" class="profile-section">
            <h3>安全设置</h3>
            <n-form
              ref="securityFormRef"
              :model="securityForm"
              :rules="securityRules"
              label-placement="left"
              label-width="100"
            >
              <n-form-item label="原密码" path="oldPassword">
                <n-input
                  v-model:value="securityForm.oldPassword"
                  type="password"
                  show-password-on="click"
                  placeholder="请输入原密码"
                />
              </n-form-item>
              <n-form-item label="新密码" path="newPassword">
                <n-input
                  v-model:value="securityForm.newPassword"
                  type="password"
                  show-password-on="click"
                  placeholder="请输入新密码"
                />
              </n-form-item>
              <n-form-item label="确认密码" path="confirmPassword">
                <n-input
                  v-model:value="securityForm.confirmPassword"
                  type="password"
                  show-password-on="click"
                  placeholder="请再次输入新密码"
                />
              </n-form-item>
              <n-form-item>
                <n-button type="primary" @click="handleChangePassword">
                  修改密码
                </n-button>
              </n-form-item>
            </n-form>
          </div>

          <!-- 消息通知 -->
          <div v-if="activeKey === 'notification'" class="profile-section">
            <h3>消息通知</h3>
            <n-space vertical>
              <n-switch v-model:value="notifications.email">
                接收邮件通知
              </n-switch>
              <n-switch v-model:value="notifications.system">
                接收系统通知
              </n-switch>
              <n-switch v-model:value="notifications.update">
                接收更新提醒
              </n-switch>
            </n-space>
          </div>
        </n-card>
      </n-grid-item>
    </n-grid>
    <avatar-selector
      v-model:show="showAvatarSelector"
      @select="handleAvatarSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import {
  PersonCircleOutline,
  ShieldCheckmarkOutline,
  NotificationsOutline,
  CameraOutline
} from '@vicons/ionicons5'
import { h } from 'vue'
import { NIcon } from 'naive-ui'
import AvatarSelector from '@/components/AvatarSelector.vue'

const message = useMessage()
const activeKey = ref('basic')
const username = ref(localStorage.getItem('username') || '')
const userAvatar = ref(localStorage.getItem('userAvatar') || 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg')

// 菜单选项
const menuOptions: MenuOption[] = [
  {
    label: '基本信息',
    key: 'basic',
    icon: renderIcon(PersonCircleOutline)
  },
  {
    label: '安全设置',
    key: 'security',
    icon: renderIcon(ShieldCheckmarkOutline)
  },
  {
    label: '消息通知',
    key: 'notification',
    icon: renderIcon(NotificationsOutline)
  }
]

// 基本信息表单
const basicInfo = ref({
  username: username.value,
  nickname: '',
  email: '',
  phone: '',
  bio: ''
})

// 表单验证规则
const rules = {
  nickname: {
    required: true,
    message: '请输入昵称',
    trigger: 'blur'
  },
  email: {
    required: true,
    message: '请输入邮箱',
    trigger: 'blur',
    type: 'email'
  },
  phone: {
    required: true,
    message: '请输入手机号',
    trigger: 'blur',
    pattern: /^1[3-9]\d{9}$/
  }
}

// 安全设置表单
const securityForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 安全设置验证规则
const securityRules = {
  oldPassword: {
    required: true,
    message: '请输入原密码',
    trigger: 'blur'
  },
  newPassword: {
    required: true,
    message: '请输入新密码',
    trigger: 'blur',
    min: 6
  },
  confirmPassword: {
    required: true,
    message: '请确认新密码',
    trigger: 'blur',
    validator: (rule: any, value: string) => {
      return value === securityForm.value.newPassword
    }
  }
}

// 消息通知设置
const notifications = ref({
  email: true,
  system: true,
  update: false
})

// 渲染图标
function renderIcon(icon: any) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 处理菜单切换
const handleMenuUpdate = (key: string) => {
  activeKey.value = key
}

// 保存基本信息
const handleSaveBasic = () => {
  message.success('保存成功')
}

// 修改密码
const handleChangePassword = () => {
  if (securityForm.value.oldPassword === 'admin' && 
      securityForm.value.newPassword === securityForm.value.confirmPassword) {
    message.success('密码修改成功')
    securityForm.value = {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  } else {
    message.error('密码修改失败，请检查输入')
  }
}

const showAvatarSelector = ref(false)

// 处理头像选择
const handleAvatarSelect = (avatarUrl: string) => {
  userAvatar.value = avatarUrl
  localStorage.setItem('userAvatar', avatarUrl)
  message.success('头像更新成功')
}
</script>

<style scoped>
.profile-container {
  padding: 24px;
}

.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}

.user-info h3 {
  margin: 16px 0 8px;
  font-size: 18px;
}

.user-role {
  margin: 0;
  color: var(--n-text-color-3);
  font-size: 14px;
}

.profile-section {
  padding: 0 16px;
}

.profile-section h3 {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 500;
}

.avatar-wrapper {
  position: relative;
  cursor: pointer;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay .n-icon {
  color: white;
  font-size: 24px;
}
</style> 